<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const canvas = document.createElement("canvas");
        canvas.width = 200;
        canvas.height = 400;
        document.body.append(canvas);
        const ctx = canvas.getContext("2d");
        // createRadialGradient参数: x0, y0, r0, x1, y1, r1
        const gradient = ctx.createRadialGradient(100, 100, 0, 100,100,100);
        gradient.addColorStop(0, "red");
        gradient.addColorStop(0.25, "yellow");
        gradient.addColorStop(0.5, "pink");
        gradient.addColorStop(1, "blue");
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 300, 200);
    </script>
</body>
</html>